<template>
    <el-row class="search-tabs">
        <el-col :span="20" :offset="2" v-if="results&&results.length>0">
            <div class="result-item" v-for="result in results" :key="result.id">
                <div class="type center-flex-box">
                    <el-tag v-if="result.type==='post'" type="warning" class="type-tag">帖子</el-tag>
                    <el-tag v-else-if="result.type==='reply'" type="info" class="type-tag">评论</el-tag>
                </div>
                <div class="search-content center-flex-box">
                    <div class="outer">
                        <div class="forward">
                            <a class="post-title" @click="goTo(result.id,result.type)">{{result.title}}</a>
                        </div>
                        <a class="post-content">{{result.content}}</a>
                    </div>
                </div>
            </div>
        </el-col>
        <div class="none" v-else>
            没有搜索到相似的内容
        </div>
        <el-col :span="18" :offset="3">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.page"
                :page-sizes="pageInfo.sizes"
                :page-size="pageInfo.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageInfo.total">
            </el-pagination>
        </el-col>
    </el-row>
</template>

<script>
    import { mapActions } from 'vuex'

    export default {
        name: 'search',
        data () {
            return {
                pageInfo: {
                    page: 1,
                    size: 20,
                    total: 0,
                    sizes: [20, 50, 100, 200, 300, 400]
                },
                content: '',
                results: []
            }
        },
        mounted () {
            let query = this.$route.query
            if (query) {
                if (query.content) {
                    this.content = query.content
                }
            }
            this.search()
        },
        watch: {
            $route (to, from) {
                let query = this.$route.query
                if (query) {
                    if (query.content) {
                        this.content = query.content
                    }
                }
                this.search()
            }
        },
        methods: {
            ...mapActions({
                searchContentAction: 'post/searchContent',
                getByIdAction: 'post/getById'
            }),
            handleSizeChange (val) {
                this.pageInfo.size = val
                this.search()
            },
            handleCurrentChange (val) {
                this.pageInfo.page = val
                this.search()
            },
            search () {
                this.action(this.searchContentAction({
                    content: this.content,
                    page: this.pageInfo.page,
                    size: this.pageInfo.size
                }), data => {
                    if (data.data) {
                        this.results = data.data.records
                        this.pageInfo.total = data.data.total
                    }
                })
            },
            goTo (id, type) {
                if (type === 'post') {
                    this.action(this.getByIdAction(id), data => {
                        let post = data.data
                        if (post) {
                            this.$router.push(`/area/${post.area}/${post.id}`)
                        } else {
                            this.$message.error('帖子找不到了')
                        }
                    })
                } else if (type === 'reply') {
                    this.$router.push(`/search/reply/${id}`)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .center-flex-box {
        vertical-align: top;
        display: -webkit-inline-flex;
        justify-content: center;
        align-items: center;
    }

    .outer {
        display: inline-block;
        text-align: left;
        width: 100%;
    }

    .search-tabs {
        margin: 20px;

        .result-item {
            height: 80px;
            margin: 5px 0;

            .type {
                width: 8%;
                height: 100%;
                margin: 0 2%;

                .type-tag {
                    width: 120px;
                }
            }

            .search-content {
                width: 85%;
                height: 100%;

                .forward {
                    .post-title {
                        font-size: 16px;
                        font-weight: bolder;

                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                    }

                    a {
                        text-decoration: none;
                        cursor: pointer;
                    }

                    a:link {
                        color: #216278;
                    }

                    a:visited {
                        color: #216278;
                    }

                    a:hover {
                        color: rgba(255, 151, 60, 0.8);
                    }

                    a:active {
                        color: rgba(255, 86, 25, 0.8);
                    }
                }

                .post-content {
                    font-size: 14px;

                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                }
            }
        }
    }
</style>
